{% extends 'index.html' %} {% block content %}
<div class="breadcrumbs">
	<div class="breadcrumbs-inner">
		<div class="row m-0">
			<div class="col-sm-4">
				<div class="page-header float-left">
					<div class="page-title">
						<h1>京乳时鲜</h1>
					</div>
				</div>
			</div>
			<div class="col-sm-8">
				<div class="page-header float-right">
					<div class="page-title">
						<ol class="breadcrumb text-right">
							<li>
								<a href="{% url 'index' %}">主页</a>
							</li>
							<li class="active">新增商品</li>
						</ol>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<div class="content">
	<div class="row">
		<div class="col-lg-12">
			<div class="card">
				{% if position %}
				<div class="card-header">
					<h4>商品入库</h4>
				</div>
				<div class="card-body">
					<div id="pay-invoice">
						<div class="card-body">
							<div style="display: inline-block">
								{% for i in position %}
								<h3>{{ i.0 }}送往货架位置：{{ i.1.s_x }},{{ i.1.s_y }},货架号{{i.1.s_id}}</h3> {% endfor %}
							</div>
							<div style="float: right;display: inline-block">
								<button class="btn btn-success" style="display: inline-block" onclick="window.location.href='{% url "add_goods" %}'">入库完成</button>
							</div>
						</div>
					</div>
				</div>
				{% elif goods_id %}
				<div class="card-header">
					<h4>添加商品成功！</h4>
				</div>
				<div class="card-body">
					<div id="pay-invoice">
						<div class="card-body">
							<div style="display: inline-block">
								<h3>商品ID：{{ goods_id }}</h3>
							</div>
							<div style="float: right;display: inline-block">
								<button class="btn btn-success" style="display: inline-block" onclick="window.location.href='{% url "add_goods" %}'">返回</button>
							</div>
						</div>
					</div>
				</div>
				{% else %}
				<div class="card-header">
					<h4>填写商品信息</h4>
				</div>
				<div class="card-body">
					<ul class="nav nav-pills mb-3" id="warehouse-tab" role="tablist">
						<li class="nav-item">
							<a class="nav-link active" id="pills-total-tab" data-toggle="pill" href="#pills-total" role="tab" aria-controls="pills-total" aria-selected="true">新增商品</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" id="pills-seg-tab" data-toggle="pill" href="#pills-seg" role="tab" aria-controls="pills-seg" aria-selected="false">商品入库</a>
						</li>
					</ul>
					<div class="tab-content" id="warehouse-tabContent">
						<div class="tab-pane fade show active" id="pills-total" role="tabpanel" aria-labelledby="pills-total-tab">
							<div id="pay-invoice1">
								<div class="card-body">
									<div class="card-title">
										<h3 class="text-center">新增商品</h3>
									</div>
									<hr>
									<form action="?type=goods" method="post" novalidate="novalidate" id="form1">
										{% csrf_token %}
										<div class="row">
											<div class="col-lg-6">
												<div class="form-group">
													<label for="goods_name" class="control-label mb-1">商品名</label>
													<input id="goods_name" name="goods_name" type="text" class="form-control" required="required" />
												</div>
												<div class="form-group">
													<label for="goods_pkg_type" class="control-label mb-1">包装类型</label>
													<select class="form-control" id="goods_pkg_type" name="goods_pkg_type">
														<option value="利乐包">利乐包</option>
														<option value="屋顶盒">屋顶盒</option>
														<option value="无菌塑料袋">无菌塑料袋</option>
														<option value="玻璃瓶">玻璃瓶</option>
														<option value="百利包">百利包</option>
														<option value="康美包">康美包</option>
														<option value="塑料瓶">塑料瓶</option>
													</select>
												</div>
												<div class="form-group">
													<label for="goods_expiration" class="control-label mb-1">保质期</label>
													<input id="goods_expiration" name="goods_expiration" type="number" class="form-control" required="required" />
												</div>
												<div class="form-group">
													<label for="goods_cold" class="control-label mb-1">需要冷藏保存</label>
													<select class="form-control" id="goods_cold" name="goods_cold">
														<option value="yes">是</option>
														<option value="no">否</option>
													</select>
												</div>
												<div class="form-group">
													<label for="goods_height" class="control-label mb-1">商品高度（mm）</label>
													<input id="goods_height" name="goods_height" type="number" class="form-control" required="required" />
												</div>
												<div class="form-group">
													<label for="goods_length" class="control-label mb-1">商品长度（mm）</label>
													<input id="goods_length" name="goods_length" type="number" class="form-control" required="required" />
												</div>
											</div>
											<div class="col-lg-6">
												<div class="form-group">
													<label for="goods_type" class="control-label mb-1">商品类型</label>
													<select class="form-control" id="goods_type" name="goods_type">
														<option value="1">巴氏消毒奶</option>
														<option value="2">脱脂奶</option>
														<option value="3">常温奶</option>
														<option value="4">高钙牛奶</option>
														<option value="5">生鲜牛奶</option>
														<option value="6">灭菌牛奶</option>
														<option value="7">无抗奶</option>
														<option value="8">调味奶</option>
													</select>
												</div>
												<div class="form-group">
													<label for="goods_price" class="control-label mb-1">商品单价</label>
													<input id="goods_price" name="goods_price" type="number" class="form-control" required="required" />
												</div>
												<div class="form-group">
													<label for="goods_weight" class="control-label mb-1">重量（克）</label>
													<input id="goods_weight" name="goods_weight" type="number" class="form-control" required="required" />
												</div>
												<div class="form-group">
													<label for="goods_product" class="control-label mb-1">生产商</label>
													<select class="form-control" id="goods_product" name="goods_product">
														{% for sup_id, sup_name in goods_supplier %}
														<option value="{{ sup_id }}">{{ sup_name }}</option>
														{% endfor %}
													</select>
												</div>
												<div class="form-group">
													<label for="goods_width" class="control-label mb-1">商品宽度（mm）</label>
													<input id="goods_width" name="goods_width" type="number" class="form-control" required="required" />
												</div>
											</div>
										</div>

										<button id="submit-button" type="submit" class="btn btn-lg btn-info btn-block">
                                                    <i class="fa fa-plus fa-lg"></i>&nbsp;
                                                    <span id="submit-button-text">提交</span>
                                                </button>

									</form>
								</div>
							</div>

						</div>
						<div class="tab-pane fade" id="pills-seg" role="tabpanel" aria-labelledby="pills-seg-tab">
							<div id="pay-invoice2">
								<div class="card-body">
									<div class="card-title">
										<form action="?type=warehouse" method="post" novalidate="novalidate" id="form2">
											<h3 class="text-center">商品入库</h3> {% csrf_token %}
											<div class="row form-group">
												<div class="col-1 col-md-1">
													<label for="order_number" class="control-label" style="width:100%">订单号</label>
												</div>
												<div class="col-3 col-md-3">
                                                    <select class="form-control" id="order_number" name="order_number" required="required">
                                                        <option disabled="disabled" selected hidden value="">请选择订单号</option>
                                                        {% for number in order_number %}
                                                        <option value="{{ number.number }}">{{ number.number }}</option>
                                                        {% endfor %}
                                                    </select>
												</div>
											</div>
											<hr>
                                            <!--todo:这里改成表格-->
                                            <table id="form-table" class="table table-striped">
                                                <tr id="table-head">
                                                    <th>商品ID</th>
                                                    <th>数量</th>
                                                    <th>生产日期</th>
                                                </tr>

                                            </table>
                                            <div class='row form-group'>
                                                <div class='col-6'>
                                                    <input name="item_number" id="item_number" type="hidden" required="required"/>
                                                    <button id="add-button" type="button" class="btn btn-lg btn-info btn-block">
                                                        <i class="fa fa-plus fa-lg"></i>&nbsp;
                                                        <span id="submit-button-text">添加</span>
                                                    </button>
                                                </div>
                                                <div class='col-6'>
                                                    <button id="submit-button" type="submit" class="btn btn-lg btn-primary btn-block">
                                                        <i class="fa fa-check fa-lg"></i>&nbsp;
                                                        <span id="submit-button-text">提交</span>
                                                    </button>
                                                </div>
                                            </div>
                                        </form>
									</div>
								</div>
							</div>
						</div>
					</div>
					{% endif %}
				</div>
			</div>
		</div>
	</div>
</div>
<script>

	var date = new Date();
    var year = date.getFullYear();
    var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : (date.getMonth() + 1);
    var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
	jQuery(document).ready(function($) {
        $("#warehouseManage").addClass("active");
        $("#add_goods").addClass("active");
        $("#w_toggle").trigger("click");
		$("#production_date").attr("max", year + "-" + month + "-" + day);
		$("form").submit(function(e) {
			var ref = $(this).find("[required=required]");
			$(ref).each(function() {
                if ($(this).val() === '' || $(this).val() === null) {
					$(this).focus();
					e.preventDefault();
					return false;
				}
			});
			return true;
		});

	});
	var count = 0;
	$("#add-button").click(function() {
		var row = '<tr>' +
			'<td>' +
			'<input id="goods_id_' + count + '" name="goods_id_' + count + '" type="text" class="form-control" required="required"/>' +
			'</td>' +
			'<td>' +
			'<input id="goods_number_' + count + '" name="goods_number_' + count + '" type="number" class="form-control" required="required"/>' +
			'</td>' +
			'<td>' +
			'<input id="production_date_' + count + '" name="production_date_' + count + '" type="date" class="form-control" required="required"/>' +
			'</td>' +
			'</tr>';
		$("#form-table").append(row);
		$("#production_date_"+count).attr("max", year + "-" + month + "-" + day);
		window.count += 1;
		$("#item_number").attr("value", window.count);
		//console.log(window.count)

	});
</script>
{% endblock %}